<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        table{border-collapse: collapse;width: 700px;height: 400px;margin: auto;}
        button{margin: auto;}
        .active{
            background: rgb(26, 103, 167);
            color: pink;
        }
        td{
          text-align: center;
        }
        button{
          margin-left: 700px;
          width: 100px;
          height: 40px;
        }
    </style>
</head>
<body>
    
      <table border="2">
          <tr>
              <td class="active">1.案胜奇</td>
              <td>2.胜案奇</td>
              <td>3.奇案胜</td>
              <td>4.案奇胜</td>
              <td>5.奇案胜</td>
              <td>6.胜案奇</td>
        </tr>
         <tr>
              <td>7.莎翁国</td>
              <td>8.电饭锅</td>
              <td>9.具体的</td>
              <td>10.飞得高</td>
              <td>11.电饭锅</td>
              <td>12.可以的</td>
        </tr>
        <tr>
              <td>13.股价为</td>
              <td>14.东方红</td>
              <td>15.手电筒</td>
              <td>16.电饭锅</td>
              <td>17.阿瓦尔</td>
              <td>18.路由图</td>
            </tr>
            <tr>
              <td>19.安慰她</td>
              <td>20.哈维我</td>
              <td>21.杀的人</td>
              <td>22.我要屠</td>
              <td>23.色胆如</td>
              <td>24.声调歌</td>
            </tr>
            <tr>
              <td>25.而受到</td>
              <td>26.地方官</td>
              <td>27.声调歌</td>
              <td>28.规范的</td>
              <td>29.的地得</td>
              <td>30.发发发</td>
            </tr>
            <tr>
              <td>31.及解决</td>
              <td>32.但是睡</td>
              <td>33.三升四</td>
              <td>34.快快快</td>
              <td>35.才幸福</td>
              <td>36.鞍山人</td>
            </tr>
            <tr>
              <td>37.石膏板</td>
              <td>38.电饭锅</td>
              <td>39.跑㔿我</td>
              <td>40.的托付</td>
              <td>41.全微分</td>
              <td>42.水电费</td>
            </tr>
            <tr>
              <td>43.中性词</td>
              <td>44.贾鑫磊 </td>
              <td>45.赵宇航 </td>
              <td>46.高赛  </td>
              <td>47.你你你</td>
              <td>48.丁子阳</td>
            </tr>
            <tr>
              <td>49.张旭</td>
              <td>50.毕鹏飞</td>
              <td>51.祝贺你</td>
              <td>52.中东有</td>
              <td>53.流行</td>
              <td>54.周荣飞</td>
            </tr>
            <tr>
              <td>55.谢婷费</td>
              <td>56.成龙</td>
              <td>57.东宇航</td>
              <td>58.安西街</td>
              <td>59.李连杰</td>
              <td>60.李志鹏</td>
            </tr>
          
      </table>
      <button id="start">开始</button>
</body>
<script>
 var arr_i = [] //每个格子的下标
     for(i=0;i<=$('td').length;i++){
         arr_i.push(i)
     }
   var  n = 0,//当前下标
    sudu = 0,
    jiang = randNum(0,59),//奖品的下标
    flag = false
    //1.页面加载事件
    $(function(){
        //2.找到开始按钮 绑定点击事件
        $('#start').click(function(){
            if(flag==true)return
            n=0,sudu = 0,jiang = randNum(1,59) //重置奖品和下标
           //3.调佣函数 改变格子背景色
            zhuan()
        })
    })
    //4. 封装 改变格子背景色函数
    function zhuan(){
        flag=true
        $('td').removeClass('active').eq(arr_i[n]).addClass('active')
        setTimeout(() => {
            sudu = sudu<150?sudu+2:sudu+50 //慢慢的快
            console.log(sudu,n)
            console.log(jiang)
            if(sudu > 400 && n==jiang-1){
                flag=false
                alert('恭喜您抽中'+$('td').eq(arr_i[n]).html())
                return
            }
            n = n==59?0:n+1 //重置下标n 从头开始转
            zhuan()
        },100);
    }
    //指定范围随机数
    function randNum(min, max) {
        return Math.floor(Math.random()* (max - min) +1) + min;
    }
</script>
</html>